<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart</title>
    <script src="./js/echarts.js"></script>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 900px;height:500px;"></div>

    <script>
$(function (){
    var myChart = echarts.init(document.getElementById('main'));
     $.ajax({
         type:"GET",
         url:"./data.json",
         dataType:"json",
         success: function (data) {
             // alert(data);
             option = {
                 title: {
                     text: '请求分页存储算法',
                     subtext: 'by cold'
                 },
                 tooltip: {
                     trigger: 'axis'
                 },
                 legend: {
                     data: ['中断次数', '置换次数', '中断率']
                 },
                 toolbox: {
                     show: true,
                     feature: {
                         dataView: { show: true, readOnly: false },
                         magicType: { show: true, type: ['line', 'bar'] },
                         restore: { show: true },
                         saveAsImage: { show: true }
                     }
                 },
                 calculable: true,
                 xAxis: [
                     {
                         type: 'category',
                         data: ['FIFO', 'OPT']
                     }
                 ],
                 yAxis: [
                     {
                         type: 'value'
                     }
                 ],
                 series: [
                     {
                         name: '中断次数',
                         type: 'bar',
                         // data: [2.0, 4.9],
                          data: data.data1,
                         markPoint: {
                             data: [
                                 { type: 'max', name: '最大值' },
                                 { type: 'min', name: '最小值' }
                             ]
                         },
                         markLine: {
                             data: [
                                 { type: 'average', name: '平均值' }
                             ]
                         }
                     },
                     {
                         name: '置换次数',
                         type: 'bar',
                         // data: [2.6, 5.9],
                          data:data.data2,
                         markPoint: {
                             data: [
                                 { type: 'max', name: '最大值' },
                                 { type: 'min', name: '最小值' }
                             ]
                         },
                         markLine: {
                             data: [
                                 { type: 'average', name: '平均值' }
                             ]
                         }
                     },
                     {
                         name: '中断率',
                         type: 'bar',
                         // data: [3.6, 9.9],
                          data:data.data3,
                         markPoint: {
                             data: [
                                 { type: 'max', name: '最大值' },
                                 { type: 'min', name: '最小值' }
                             ]
                         },
                         markLine: {
                             data: [
                                 { type: 'average', name: '平均值' }
                             ]
                         }
                     }
                 ]
             };
             // 使用刚指定的配置项和数据显示图表。
             myChart.setOption(option);
         },
         error :function (e) {
             alert("error")

         }
     })
})



    </script>
</body>

</html>